<template>
  <!-- 通知栏 -->
  <van-notice-bar
      left-icon="volume-o"
      text="系统更新：已经上线打赏作者功能。"
  />
  <!-- 心动模式开关 -->
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" @change="loadUserList" />
    </template>
  </van-cell>
  <!-- 骨架屏 -->
  <van-skeleton title avatar :row="3" :loading="userList.length === 0">
    <card-user-list :userList="userList" />
  </van-skeleton>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getRecommendUsers} from "../services/api";
import CardUserList from "../components/CardUserList.vue";

const userList = ref([])
const isMatchMode = ref(false); // 是否开启心动模式

// 加载用户数据方法
const loadUserList = async () => {
  userList.value = [];
  const recommendUsers = await getRecommendUsers(isMatchMode.value);
  if (recommendUsers) {
    userList.value = recommendUsers.map(user => {
      user.userTags = JSON.parse(user.userTags);
      return user;
    });
  }
}

onMounted(async () => {
  await loadUserList();
})


</script>

<style scoped>

</style>